<template>
  <el-form ref="ruleFormRef"
           :model="profileInfo.userInfo"
           :rules="rules" label-width="auto">
    <el-form-item label="姓名" prop="username">
      <el-input v-model="profileInfo.userInfo.username"
                :maxlength="10" show-word-limit
                clearable :disabled="!profileInfo.isEdit"/>
    </el-form-item>

    <el-form-item label="性别">
      <el-radio-group v-model="profileInfo.userInfo.gender"
                      :disabled="!profileInfo.isEdit">
        <el-radio :value="1">男</el-radio>
        <el-radio :value="0">女</el-radio>
      </el-radio-group>
    </el-form-item>

    <el-form-item label="生日">
      <el-date-picker v-model="profileInfo.userInfo.birthDate"
                      type="date" :editable="false"
                      placeholder="请选择日期" :disabled="!profileInfo.isEdit"/>
    </el-form-item>

    <el-form-item label="地区">
      <el-cascader v-model="profileInfo.userInfo.area"
                   placeholder="请选择地区" :options="pcTextArr"
                   :disabled="!profileInfo.isEdit">
      </el-cascader>
    </el-form-item>

    <el-form-item label="地址">
      <el-input v-model="profileInfo.userInfo.address"
                :maxlength="20" show-word-limit clearable
                placeholder="请输入地址" :disabled="!profileInfo.isEdit"/>
    </el-form-item>

    <el-form-item label="职业">
      <el-input v-model="profileInfo.userInfo.job"
                :maxlength="20" show-word-limit clearable
                placeholder="请输入职业" :disabled="!profileInfo.isEdit"/>
    </el-form-item>

    <el-form-item label="描述">
      <el-input v-model="profileInfo.userInfo.description"
                type="textarea" :rows="3"
                :maxlength="100" show-word-limit clearable
                placeholder="用一句话描述自己" :disabled="!profileInfo.isEdit"/>
    </el-form-item>

    <el-form-item>
      <el-button type="primary" v-if="!profileInfo.isEdit"
                 @click="editClick">编辑</el-button>
      <el-button type="primary" v-if="profileInfo.isEdit"
                 @click="submitForm(ruleFormRef)">保存</el-button>
      <el-button v-if="profileInfo.isEdit"
                 @click="cancelClick">取消</el-button>
    </el-form-item>
  </el-form>
</template>

<script setup lang="ts">
import { pcTextArr } from 'element-china-area-data'
import { useUserStore } from '@/store/user.ts'
import { onMounted, reactive, ref, watch } from 'vue'
import { ElMessage, FormInstance, FormRules } from 'element-plus'
import { profileInfoRules } from '@/utils/element/elRules.ts'
import { IUser } from '@/types/auth.ts'
import { deepCopyObject } from 'vue3-common/utils/dataUtil'

const userStore = useUserStore()
const ruleFormRef = ref<FormInstance>()
const rules = reactive<FormRules>(profileInfoRules)

const profileInfo = reactive({
  userInfo: {} as IUser,
  isEdit: false
})

onMounted(() => {
  userStore.queryUser()
})

watch(() => userStore.userInfo, () => {
  profileInfo.userInfo = deepCopyObject(userStore.userInfo)
})

const editClick = () => {
  profileInfo.isEdit = true
}

const cancelClick = () => {
  profileInfo.isEdit = false
  profileInfo.userInfo = deepCopyObject(userStore.userInfo)
}

const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      userStore.updateUser(userStore.userInfo.id, profileInfo.userInfo)
      userStore.queryUser()
      profileInfo.isEdit = false
      ElMessage.success('更改信息成功')
    } else {
      ElMessage.error('请先填写信息')
    }
  })
}
</script>

<style scoped lang="scss">

</style>
